<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>&nbsp;圈子文章详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form  label-width="160px">
                <el-form-item label="标题：">
                    <div>
                        {{data.title}}
                    </div>
                </el-form-item>
                <el-form-item label="封面图：">
                    <div>
                       <img :src="data.head_img" alt="" style="width:320px; height:160px;">
                    </div>
                </el-form-item>
                <el-form-item label="主要内容：">
                    <div v-html="data.content" style="width:800px;height:auto;">
                    </div>
                </el-form-item>
                <el-form-item label="阅读数：">
                    <div>
                        {{data.read_num}}
                    </div>
                </el-form-item>
                <el-form-item label="所属分站：">
                    <div>
                        {{cityName}}
                    </div> 
                </el-form-item>
                <!-- <el-form-item label="关键字：">
                    <div style="overflow:hidden">
                       <div style="float:left;margin-right:15px;" v-for="item in keywords" :key="item">
                            <el-tag>{{item}}</el-tag>
                        </div>
                    </div>
                </el-form-item> -->
        
                <el-form-item label="作者：">
                    <div>
                        {{data.author}}
                    </div>
                </el-form-item>
                 <el-form-item label="创建时间：">
                    <div>
                        {{data.create_time}}
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="returnList">返回列表</el-button>
                </el-form-item>
            </el-form>
        </div>
       
    </div>
</template>
<script>
import { getTopicList,getCityList } from '@/api/topic'
export default {
    name:"topicDetails",
    data() {
        return {
            id:'', //详情id
            data:'',//数据
            imgList:[],//图集
            title:'',//标题
            pageIndex:1,
            pageSize:99999999,
            keywords:[],//关键词数组
            cityData:[],//所有分站城市数据
            cityName:'',//分站城市
        }
    },
    //实例创建
    created(){
        //获得所有分站城市
        this.getCityList();

        if(this.$route.query.id &&this.$route.query.id!=""){
            this.id = this.$route.query.id;
        }else{
           this.$notify.info({title: '提示',message: '获取详情ID失败，请返回列表页重试！'});
        }
    },
    //方法
    methods: {
        //获得所有分站城市
        getCityList(){
             getCityList(1,99999).then((response)=> {
                // console.log(response);
                if(response.code==200){
                    this.cityData = response.data;
                    // console.log(this.cityData);
                    //获取表格数据
                     this.getData();
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //获取详情
       getData(){
            getTopicList(this.title,this.pageIndex,this.pageSize).then((response)=> {
                // console.log(response);
                if(response.code==200){
                    let Data = response.data.list;//当前返回的数据
                    //遍历查找数据
                    for(let i=0;i<Data.length;i++){
                        if(Data[i].id == this.id){//扎到了
                            this.data = Data[i];
                            // console.log(this.data);
                            this.cityData.forEach(element => {
                                if(element.id == this.data.city_id){
                                    this.cityName = element.name;
                                }
                            });
                            
                        }
                    }
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //返回列表
        returnList (){
          this.$router.go(-1);
        }
    }
}
</script>
<style lang="stylus" scoped>
    .el-form-item .el-cascader{
        width :400px;
    }
    .el-cascader-menus .el-cascader-menu{
        width :240px
    }
</style>


